<template>  
  <div class="inspection-route">  
    <!-- 顶部导航栏 -->  
    <van-nav-bar  
      title="巡检轨迹"  
      left-text="返回"  
      left-arrow  
      @click-left="onBack"  
      right-text="关闭"  
      @click-right="onClose"  
    />  

    <!-- 图片容器 -->  
    <div class="map-container">  
      <div  
        class="map-wrapper"  
        :style="mapStyle"  
        @touchstart="onTouchStart"  
        @touchmove="onTouchMove"  
        @touchend="onTouchEnd"  
      >  
        <img  
          :src="trajectory"
          alt="巡检轨迹"  
          class="map-image"  
        />  
      </div>  
    </div>  
  </div>  
</template>  

<script>  
import trajectory from '@/assets/logo/trajectory.png'
export default {  
  data() {  
    return {  
      trajectory,
      scale: 1, // 图片缩放比例  
      startX: 0, // 手指触摸开始的 x 坐标  
      startY: 0, // 手指触摸开始的 y 坐标  
      translateX: 0, // 图片的 x 偏移  
      translateY: 0, // 图片的 y 偏移  
      lastTranslateX: 0, // 上一次的 x 偏移  
      lastTranslateY: 0, // 上一次的 y 偏移  
      isDragging: false, // 是否正在拖动  
    };  
  },  
  computed: {  
    mapStyle() {  
      return {  
        transform: `scale(${this.scale}) translate(${this.translateX}px, ${this.translateY}px)`,  
        transition: this.isDragging ? "none" : "transform 0.3s",  
      };  
    },  
  },  
  methods: {  
    onBack() {  
      this.$router.go(-1);  
    },  
    onClose() {  
      this.$router.push("/home");  
    },  
    onTouchStart(event) {  
      const touch = event.touches[0];  
      this.startX = touch.clientX;  
      this.startY = touch.clientY;  
      this.isDragging = true;  
    },  
    onTouchMove(event) {  
      if (!this.isDragging) return;  

      const touch = event.touches[0];  
      const deltaX = touch.clientX - this.startX;  
      const deltaY = touch.clientY - this.startY;  

      this.translateX = this.lastTranslateX + deltaX;  
      this.translateY = this.lastTranslateY + deltaY;  
    },  
    onTouchEnd() {  
      this.lastTranslateX = this.translateX;  
      this.lastTranslateY = this.translateY;  
      this.isDragging = false;  
    },  
    zoomIn() {  
      this.scale = Math.min(this.scale + 0.1, 3); // 最大缩放 3 倍  
    },  
    zoomOut() {  
      this.scale = Math.max(this.scale - 0.1, 1); // 最小缩放 1 倍  
    },  
  },  
};  
</script>  

<style scoped>  
.inspection-route {  
  height: 100%;  
  display: flex;  
  flex-direction: column;  
}  

.map-container {  
  flex: 1;  
  overflow: hidden;  
  position: relative;  
  background-color: #000;  
}  

.map-wrapper {  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);  
  will-change: transform;  
}  

.map-image {  
  width: 100%;  
  height: auto;  
  user-select: none;  
  touch-action: none;  
}  
</style>